<template>
   <div class="mywallet">
     <wxc-minibar class="border-bottom" title="提现">
        <!-- <div class="header-con" slot="middle">          
            <text class="header-title">提现</text>
        </div>    -->
        <text slot="right" style="font-size:30px;color:#333333;" @click="godepositrecord()">提现记录</text>
     </wxc-minibar>

    <div class="i_e_list">
        <div class="choosedpay" @click="choosepaymodel">
            <div class="choosedpay_fl">
              <text class="chose_txt">提现银行卡</text>
            </div>
            <div class="choosedpay_fr">
                <text v-if="!paymodellist.length" style="font-size: 32px;color:#999999;font-family: PingFangSC-Medium;">添加银行卡</text>
               <text v-else style="font-size: 32px;color:#2B3940;font-family: PingFangSC-Medium;">{{paymodel.bankName}} {{ paymodel.bankCard | substrString }}</text>
			   <text class="discover_item_arrow">&#xe61c;</text>
            </div>
        </div>
        <div class="deposit_moneyWrap">
            <div class="deposit_moneyTxt">
                <text class="deposit_txt">提现金额</text>
            </div>
            <div class="deposit_money">
                <text class="deposit_rmb">￥</text>
                <div class="form_fr">
                    <input :class="[money?bigTxt:smallTxt]" type="number" ref="depositMoney" class="input" v-model="money" placeholder="最低提现金额10.00元">
                </div>   
            </div>
            <div class="canuse_money">
            <div class="canuse_money_fl">
                <text class="canuse_txt">可提现余额</text>
                <text class="canuse_txt" style="padding-left:10px;">{{capitalFrozen}}元</text>
            </div>
            <div class="canuse_money_fr" @click="alldeposit()">
                <text class="canuse_txt1">全部提现</text>
            </div>
            </div>
        </div>
      
        <div class="button" :style="{'background-color':money?'#E53935':'#D0D0D0'}" @click="confirmdeposit()">
          <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #FFFFFF;">确认提现</text>
        </div>
        <div class="desc">
            <text class="desc-txt">1.每笔提现订单收取1元作为银行转账手续； </text>
            <text class="desc-txt">2.工作日16:30前提现当日到账，之后提现下一个工作日到账； </text>
            <text class="desc-txt">3.双休日/节假日提现下一个工作日到账； </text>
            <text class="desc-txt">4.若因卡号错误等原因导致提现审核未。</text>
        </div>
         <wxc-popup popup-color="#FFFFFF"
               :show="isBottomShow"
               @wxcPopupOverlayClicked="popupOverlayBottomClick"
               pos="bottom"
               height="700">
            <div class="paylist">
                <div class="paylist_title">
                    <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">选择提现方式</text>
                </div>
                <div class="pay_detail" @click="qiehuancheck(item)" v-for="(item,index) in paymodellist" :key="index+1/17"  :style="checkDiabled(item)"  >
                   <div class="pay_detail_fl">
                       <image style="width:40px;height:40px;" :src="item | fliterSrc"></image>
                       <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-left:32px;">{{item.bankName}} {{ item.bankCard | substrString }}</text>
                       
                   </div>
                   <div class="pay_detail_fr">
                      <div v-if="!item.checkflag" style="width:40px;height:40px;background-color:white;border-radius:20px;border-width:1px;border-color:rgba(0,0,0,0.1);"></div>
                      <image v-if="item.checkflag" style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png"></image>
                   </div>
                </div>
            </div>
        </wxc-popup>

    </div>
   </div>
</template>

<script>
const modal = weex.requireModule("modal")
const navigator = weex.requireModule("navigator")
const storage = weex.requireModule('storage')
import { WxcMask, WxcPopup } from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { yearMonthdate } from "@/utils";
import { getBaseUrl, serialize } from "@/utils/index.js";
import { postResponsesToken } from "@/api.js";
import banklistdata from "@/js/banklist.js";
let myWalletIndex = new BroadcastChannel('app')
let deposit = new BroadcastChannel('deposit')

export default {
	data() {
		return {
			money:'',
			address:'',
			alertCode: false,
			capitalFrozen:'',
			content:'',
			current: 1,
			size: 20,
			active: 0, //当前激活的tab
			moneyarr: [100, 200, 500, 1000],
            isBottomShow: false,
            saveState:false,
			paymodel: {},
			baseURL:'',
            paymodellist: [],
            bigTxt:'bigTxt',
            smallTxt:'smallTxt'
		}
	},
	components: {
		WxcMask,
		WxcMinibar,
		WxcPopup
	},

	filters:{
        substrString(value) {
            return !!value ? value.substr(value.length-4) : ''
		},
		
		fliterSrc(item) {
			let src = ''
			banklistdata.banklist.forEach((value, index)=>{
				if( value.title === item.bankName) {
					src = value.src
					return false;
				}
			})

			return src
		}
	},
	
	created() {
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true);

        deposit.onmessage =  (event)=> {
            // 获取资金信息
            this.getPersonalDetails()
        }

        this.queryBankCard()
        
        this.getPersonalDetails()

	},

	methods: {
		alldeposit(){
			this.money =  this.roundFn(Number(this.capitalFrozen), 2)
		},

         // 获取缓存
        getItem (name) {
            return new Promise((resolve, reject)=>{
                storage.getItem(name, event => {
                    if (event.result === "success") {
                        resolve(event.data);
                    } else {
                        reject("获取数据失败");
                    }
                })
            })
        },
   

        // 获取个人信息
        getPersonalDetails() {
            this.getItem('personalDetails').then( (value) => {
                // 昵称， 头像，总资金, 积分
                let { capitalAvailable } = JSON.parse(value)
                
                this.capitalFrozen = capitalAvailable || '0.00'

            })
        },


        roundFn(n, decimals = 0) {
            return Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
        },

		confirmdeposit(){
            if(!this.money){
                	modal.alert({
					message: "请输入提现金额",
					okTitle: "确定"
				});

				return false;
            }
            if( JSON.stringify(this.paymodel) == '{}' || this.paymodel.bankCard == '')  {
                modal.alert({
					message: "请选择绑定的银行卡",
					okTitle: "确定"
				});

				return false;
            }

			if(this.money < 10){
				modal.alert({
					message: "最低提现金额为10元",
					okTitle: "确定"
				});

				return false;
            }
            
			if(this.money > this.capitalBalance){
				modal.alert({
					message: "提现金额不能大于可用余额",
					okTitle: "确定"
				});

				return false;
            }
            

            this.yopwithdrawal()
		},

		popupOverlayBottomClick() {
			this.isBottomShow = false
        },
        
		checkDiabled(item) {
			if (item.disabled === true) {
				return {
					opacity: "0.4"
				};
			}
		},
		qiehuancheck(item) {
			this.paymodellist.forEach((item,index)=>{
				item.checkflag = false
			})

			item.checkflag  = !item.checkflag

			this.isBottomShow = false
			this.paymodel = item
		},

		alert(title, msg) {
			this.alertCode = true;
			this.content = title;
			setTimeout(() => {
				this.alertCode = false;
			}, 2000);
        },
        
		choosepaymodel() {
            this.$refs['depositMoney'].blur()
            if(this.paymodellist.length>0){
                this.isBottomShow = true;
            }else{
                navigator.push({
                    url: this.baseURL + "views/mywallet/addbankcard.js",
                    animated: "true"
			});
            }
			
        },
        
		godepositrecord() {
			navigator.push({
				url: this.baseURL + "views/mywallet/depositlist.js",
				animated: "true"
			});
		},


        // 提现
        async yopwithdrawal() {
            
            if(!!this.saveState) return ;

            this.saveState = true

            let param = {
                bankName:this.paymodel.bankName,
                bankCard:this.paymodel.bankCard,
                bankType:this.paymodel.bankType,
                amount: this.money
            }
            let data = await postResponsesToken('cash/maccount/yopwithdrawal',param);

			if( data.code === 0)  {
                let param = {
                    money: this.money,
                    usableMoney: this.capitalFrozen  - this.money
                }
				navigator.push({
                    url: this.baseURL + "views/mywallet/deposit_result.js?"+ serialize(param),
                    animated: "true"
                });

                // 刷新入口资金
                myWalletIndex.postMessage('post')

                this.getPersonalDetails()
                
                this.saveState = false
			} else {
                modal.toast({ message: data.msg });
                this.saveState = false
			}
        },

        // 获取銀行卡列表
		async queryBankCard() {
            let data = await postResponsesToken('account/bank/queryBankCard')
            
            if(data.code === 0) {
                this.paymodellist = data.data;
                //从数组中取第一个
                this.paymodel=this.paymodellist[0];
            } else {
                modal.toast({ message: data.msg })
            }
        }
	}
};
</script>

<style scoped>
.desc-txt{
    color:#A8ADAF;
    font-size:26px;
    padding-bottom:20px;
}
.input{
    height:82px;
}
.canuse_txt1{
    font-family: PingFangSC-Medium;
    font-size: 28px;
    color: #578EE9;
}
.canuse_txt{
    font-family: PingFangSC-Medium;
    font-size:28px;
    color:#999999;
    margin-right:10px;
}
.chose_txt{
    font-family: PingFangSC-Medium;
    font-size: 32px;
    color: #333333;
}
.bigTxt{
    font-size:70px;
    color:#2B3940;
}
.smallTxt{
     font-size:28px;
    color:#D0D0D0;
}
.mywallet {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
}
.deposit_rmb{
    font-size:70px;
    color:#333333;
    margin-right:20px;
    font-family: PingFangSC-Medium;
}
.deposit_moneyWrap{
      padding-left:32px;
      padding-right:32px;
      background-color: #fff;
}
.deposit_moneyTxt{
    padding-top:24px;
}
.deposit_txt{
    color:#333333;
    font-size:28px;
}
.choose_money {
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(245, 245, 245);
}
.choose_money_item {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: #d1d1d1;
  border-radius: 8px;
  width: 160px;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.deposit_money {
  height: 195px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color:#DCDCDC;
}
.account_balance {
  height: 112px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(245, 245, 245);
}
.form_fr {
  width: 445px;
}

.choosedpay {
  display: flex;
  justify-content: space-between;
  height: 112px;
  background-color: white;
  flex-direction: row;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(245,245,245);
  margin-bottom:24px;
}
.choosedpay_fl {
  align-items: center;
  margin-left: 32px;
  display: flex;
  flex-direction: row;
}
.choosedpay_fr {
  display: flex;
  flex-direction: row;
  margin-right: 32px;
  align-items: center;
}
.paylist_title {
  height: 112px;
  line-height: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.pay_detail {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
  height: 96px;
  line-height: 96px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.pay_detail_fl {
  display: flex;
  flex-direction: row;
  margin-left: 32px;
}
.pay_detail_fr {
  margin-right: 32px;
}
.discover_item_arrow {
  font-family: iconfttf;
  font-size: 26px;
  color: #d8d8d8;
  margin-left: 19px;
}
.canuse_money{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(245,245,245);
    height: 112px;
    background-color: #FFFFFF;
    align-items: center;
}
.canuse_money_fl{
  
    display: flex;
    flex-direction: row;
}
.canuse_money_fr{
    
}
.button{
    margin-top: 80px;
    margin-left: 32px;
    margin-right: 32px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.desc{
    margin-top: 40px;
    margin-left: 32px;
    margin-right: 32px;
    display: flex;
    flex-direction: column;
}

.border-bottom{
  border-bottom-color: #f1f1f1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Medium;
}
</style>
